<template>
  <div class="my-msgs sg-flex-column">
    <sg-header @back="$router.go(-1)">
      <span>我的消息</span>
    </sg-header>

    <div class="main sg-flex-one">
      <sg-scroll ref="sgScroll" :isEnd="true" @refresh="handleRefresh">
        <div v-for="item in msgs" :key="item.id" class="msg-item">
          <!-- 消息内容 -->
          <p>{{ msgTextFilter(item) }}</p>

          <!-- 消息简介 -->
          <div class="msg-bottom sg-flex">
            <div class="title">
              {{ msgTypeFilter(item) }}
            </div>
            <div class="sg-flex-one time">
              {{ $filters.timeFilter(item.createTime) }}
            </div>
            <sg-button :disabled="item.status > 0" type="text" @click="onReadMsg(item)">
              {{ item.status > 0 ? '已读' : '了解' }}</sg-button
            >
          </div>
        </div>

        <div class="msg-bottom-tip">暂只展示最新{{ maxCount }}条消息</div>
      </sg-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { apiURL, apiPostData } from '@/api'
import { mapState, mapActions } from 'pinia'
import { useSysMsgStore } from '@/store/index'
import { MSG_TYPE } from '@/common/const'

const msgTypeMap = {} as any
Object.keys(MSG_TYPE).forEach((key) => {
  const item = (MSG_TYPE as any)[key]
  msgTypeMap[item.value] = item
})

export default {
  name: 'MyMsgs',

  data() {
    return {
      maxCount: 100
    }
  },

  computed: {
    ...mapState(useSysMsgStore, {
      msgs: 'msgs'
    })
  },

  created() {},

  methods: {
    msgTypeFilter(item: any) {
      const o = msgTypeMap[item.msgType] || MSG_TYPE.SYS
      return o.label
    },
    msgTextFilter(item: any) {
      switch (item.msgType) {
        case MSG_TYPE.USER_CREATE.value:
          return item.content || '欢迎注册Sghen三行~'
        default:
          return item.content || '--'
      }
    },

    onReadMsg(item: any) {
      if (item.loading) {
        return
      }
      item.loading = true
      apiPostData(apiURL.readSysMsg, { id: item.id })
        .then(() => {
          item.status = 1
        })
        .finally(() => {
          item.loading = false
        })
    },

    handleRefresh() {
      this.getSysMsgs({ limit: this.maxCount, offset: 0 } as any)
        .then(() => {
          ;(this.$refs.sgScroll as any).success()
        })
        .catch(() => {
          ;(this.$refs.sgScroll as any).fail()
        })
    },
    ...mapActions(useSysMsgStore, {
      getSysMsgs: 'getSysMsgs'
    })
  }
}
</script>

<style lang="scss" scoped>
.my-msgs {
  position: relative;
  height: 100%;
  overflow: hidden;

  .main {
    flex: 1;
    overflow: hidden;
  }
}

.msg-item {
  padding: 0.5rem 1rem 1rem;
  font-size: 1.2rem;
  line-height: 2rem;
  align-items: flex-end;
  &:nth-child(2n) {
    background-color: white;
  }

  .msg-bottom {
    font-size: 1rem;
    color: #888888;
    border-bottom: 1px dashed gray;
  }
  .title {
    width: 100px;
    text-align: left;
  }
  .time {
    text-align: right;
    margin-right: 3rem;
  }
  p {
    margin-bottom: 0.5rem;
  }
}

.msg-bottom-tip {
  text-align: center;
  font-size: 0.8rem;
  color: #999999;
  margin: 1rem 0;
}
</style>
